<template>
  <div id="detail-shop-info">
    <div class="shop-top">
      <img :src="shop.logo" alt="" />
      <span class="title">{{ shop.name }}</span>
    </div>
    <div class="shop-middle">
      <div class="shop-middle-left shop-middle-item">
        <div class="info-sells">
          <div class="sells-count">
            <!-- sellCountFilter -->
            {{ shop.sells }}
          </div>
          <div class="sells-text">总销量</div>
        </div>
        <div class="info-goods">
          <div class="goods-count">
            {{ shop.goodsCount }}
          </div>
          <div class="goods-text">全部宝贝</div>
        </div>
      </div>
      <div class="shop-middle-right shop-middle-item">
        <table>
          <tr v-for="(item, index) in shop.score" :key="index">
            <td>{{ item.name }}</td>
            <td class="score" :class="{ 'score-better': item.isBetter }">
              {{ item.score }}
            </td>
            <td class="better" :class="{ 'better-more': item.isBetter }">
              <span> {{ item.isBetter ? "高" : "低" }} </span>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="shop-bottom">
      <div class="enter-shop">进店逛逛</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shop: {
      type: Object,
    },
  },
  filters: {
    sellCountFilter() {},
  },
};
</script>

<style lang="less" scoped>
#detail-shop-info {
  border-top: 6px solid #f1f3f4;
  padding: 0 10px;
  color: #000;
  .shop-top {
    display: flex;
    align-items: center;
    margin: 25px 0;
    font-size: 20px;
    height: 60px;
    color: #666;
    img {
      width: 60px;
      margin-right: 10px;
      box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.1);
      border-radius: 50%;
    }
  }
  .shop-middle {
    display: flex;
    align-items: center;
    height: 80px;
    text-align: center;

    .shop-middle-left {
      flex: 1;
      display: flex;
      margin-right: 20px;
      .info-sells {
        flex: 1;
        .sells-count {
          font-size: 20px;
          padding: 5px 0;
        }
        .sells-text {
          font-size: 14px;
        }
      }
      .info-goods {
        flex: 1;
        .goods-count {
          font-size: 20px;
          padding: 5px 0;
        }
        .goods-text {
          font-size: 14px;
        }
      }
    }
    .shop-middle-right {
      flex: 1;
      height: 100%;
      margin-left: 20px;
      table {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        tr {
          display: flex;
          justify-content: space-between;
          .score {
            color: #5ea732;
          }
          .better {
            color: #5ea732;
          }
          .score-better {
            color: #f13e3a;
          }
          .better-more {
            color: #f13e3a;
          }
        }
      }
    }
  }
  .shop-bottom {
    padding: 20px 0;
    .enter-shop {
      margin: auto;
      width: 100px;
      height: 40px;
      border-radius: 20px;
      text-align: center;
      line-height: 40px;
      color: #fff;
      background-color: #fe6d13;
    }
  }
}
</style>